<template>
	<view class="">
		<view class="sub-yue">
			<view class="sub-yue-top u-flex">
				<text>定时开台</text>
				<view class="right-icon">
					<u-icon @click="closeSubYue" name="close" color="#333333" size="18"></u-icon>
				</view>
			</view>

			<view class="vip-cz-area">
				<view class="cz-list u-flex">
					<view class="cz-item u-flex" :class="{'cz-item-act':czSelId===item.czVal}" @click="selCzType(item)" v-for="item in czList" :key="item.czVal">
						<view>
							<text>{{item.czVal}}</text>小时开台
						</view>
						<image v-show="czSelId===item.czVal" src="../../static/sel-time-icon.png"></image>
					</view>
				</view>
			</view>
			<view class="sub-door-pay u-flex">
				<view class="door-tit">
					支付方式
				</view>
				<view class="door-adres u-flex" @click="showDoor=true">
					<text>{{payVal.name}}<text v-show="payVal.type===1">（余额：￥{{payDate.sumUserBalance}}元）</text></text>
					<u-icon name="arrow-right" color="#333333" size="14"></u-icon>
				</view>
			</view>
			<view class="warn-tips">
				<view>温馨提示</view>
				<view>定时开台为预付费，提前结束不退费</view>
			</view>
			<view class="check-area u-flex">
				<u-checkbox-group v-model="checked">
					<u-checkbox :checked="checked.length===1" shape="circle" activeColor="#FF7814" size="16"></u-checkbox>
				</u-checkbox-group>
				<view class="text-check">
					开台视为同意<text>《用户协议》</text>	及<text>《隐私政策》</text>
				</view>
			</view>

			<view class="sub-date-btm u-flex">
				<view class="">
					<view class="sub-date-btm-left u-flex">
						<view class="left-price">
              支付金额：<text>{{needPayMoney}}</text>元
						</view>
					</view>
          <view class="left-description">
            <text>含押金{{payDate.deposit}}元，结束即退押金！</text>
          </view>
				</view>
				<view class="sub-yue-btn" @click="toPlaying">
					立即开台
				</view>
			</view>
		</view>
		<u-picker :show="showDoor" :columns="columns" key-name="name" @cancel="showDoor=false" @confirm="selDoor"></u-picker>
	</view>
</template>

<script>
	export default {
		props: {
      notifyId:{
        type: String,
        default: "VIP_OPEN"
      },
      payDate:{
        type: Object,
        default:()=>({})
      }
    },
		data() {
			return {
				showSubYue:false, //开台弹窗
				payVal:{type:1,name:'余额支付'},
				showDoor:false, //选择支付方式
				columns: [
          [{type:1,name:'余额支付'}, {type:'2',name:'微信支付'}]
				],
				checked:[''],
				ticketVal:'暂无可用',
				czList:[
					{
						czVal:1
					},
					{
						czVal:2
					},
					{
						czVal:3
					},
					{
						czVal:4
					},
					{
						czVal:5
					},
					{
						czVal:6
					},
				],
				czSelId:1 //选择充值金额
			}
		},
		onLoad(option) {
		},
		mounted() {
			this.selTypeId=this.notifyId;
			console.log(this.notifyId,'this.notifyId;')

		},
    computed:{
      needPayMoney: function () {
        return (this.czSelId * this.payDate.poolTablePrice)+this.payDate.deposit;
      },
    },
		methods:{
			//关闭开台
			closeSubYue(){
				this.$emit('closeSubYue')
			},

			//选择支付方式
			selDoor(val){
				this.payVal=val.value[0];
				this.showDoor=false
				console.log(val)
			},

			//选择支付金额
			selCzType(data){
				this.czSelId=data.czVal;
				console.log(this.checked.length)
			},

      toPlaying(){
        this.$emit("payOrder", {
          notifyId: this.notifyId,            //支付类型 VIP_OPEN->VIP开台
          payType: this.payVal.type,         //支付方式 1：余额支付，2：微信支付
          dateCount: this.czSelId,
        });
        this.closeSubYue();
      }
		}
	}
</script>

<style lang="scss" scoped>
	.sub-yue{
		padding: 20rpx 0 0 0;
		background-color: #EDEDED;
		.sub-yue-top{
			padding: 0 26rpx;
			justify-content: center;
			position: relative;
			.right-icon{
				position: absolute;
				right: 26rpx;
			}
		}

		.sub-date-btm{
			width: 750rpx;
			height: 98rpx;
			background: #FFFFFF;
			border: 1rpx solid #EEEEEE;
			box-shadow: 0px 0px 19rpx 1rpx rgba(0,0,0,0.1);
			padding: 0 26rpx;
			justify-content: space-between;
			box-sizing: border-box;
			margin-top: 20rpx;
			.sub-date-btm-left{
				align-items: baseline;
				.left-price{
					font-size: 26rpx;
					font-weight: 550;
					color: #333333;
					margin-right: 20rpx;
					text{
						font-size: 40rpx;
						color: #FF7814;
						font-weight: 550;
					}
				}
			}
      .left-description{
        font-size: 22rpx;
        font-family: PingFang SC;
        color: #999999;
      }
			.sub-yue-btn{
				width: 240rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: #FF7814;
				border-radius: 36rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
			}
			.tips-look{
				font-size: 22rpx;
				color: #FF7814;
				text{
					margin-right: 10rpx;
				}
			}
		}
		.sub-door-pay{
			justify-content: space-between;
			padding: 30rpx 24rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin: 20rpx 26rpx 14rpx;
			.door-tit{
				font-size: 28rpx;
				font-weight: 550;
				color: #333333;
				>view{
					&:nth-child(2){
						font-size: 22rpx;
						font-weight: 400;
						color: #666666;
						margin-top: 4rpx;
					}
				}
			}
			.door-adres {
				font-size: 28rpx;
			}
		}
		.check-area{
			margin: 10rpx 26rpx 28rpx;
			.text-check{
				font-size: 24rpx;
				color: #999999;
				text{
					color: #263BDF;
				}
			}
		}
		.warn-tips{
			margin: 10rpx 26rpx 28rpx;
			>view{
				&:nth-child(1){
					font-size: 24rpx;
					font-weight: 550;
					color: #333333;
					margin-bottom: 8rpx;
				}
				&:nth-child(2){
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
		.vip-cz-area{
			margin: 20rpx 26rpx 0;
			padding: 0 26rpx 20rpx ;
			box-sizing: border-box;
			background-color: #FFFFFF;
			border-radius: 8rpx;
			.cz-list{
				flex-wrap: wrap;
				justify-content: space-between;
				.cz-item{
					margin-top: 22rpx;
					width: 303rpx;
					height: 96rpx;
					background: #FFFFFF;
					border: 1rpx solid #DDDDDD;
					border-radius: 8px;
					justify-content: center;
					box-sizing: border-box;
					>view{
						&:nth-child(1){
							font-size: 28rpx;
							color: #333333;
							text{
								font-size: 40rpx;
								font-weight: 550;
							}
						}

					}
				}
				.cz-item-act{
					border: 1rpx solid #FF7814;
					position: relative;
					image{
						width: 33rpx;
						height: 34rpx;
						position: absolute;
						right: 0;
						bottom: 0;
					}
				}
			}
		}
	}

</style>
